<template>
    <div v-if="pForm.show">
        <bDetail :instance="pForm" title="基本信息">
            <template #edit>
                <div class="textbutton" v-if="but.has('public:account:update')" @click="pForm.show = false">
                    {{ but.get("public:account:update") }}
                </div>
            </template>
        </bDetail>
    </div>
    <bForm v-else :instance="pForm">
        <div style="display: grid;grid-gap: 2vw;grid-template-columns: 1fr 3fr;margin: 0 2vw;">
            <!-- 若存在后端，取消时重新拉取数据 -->
            <Button @click="() => { pForm.setData(); pForm.show = true }" style="border-radius: 6px;" type="danger">
                取消
            </Button>
            <Button @click="update" style="border-radius: 6px;" type="primary">完成
            </Button>
        </div>
    </bForm>
    <bCropper v-model:img="tempImg"></bCropper>
</template>
<script lang="ts" setup>
import bDetail from "@m/components/public/b_detail.vue";
import bForm from "@m/components/public/b_form.vue";
import bCropper from "@m/components/public/b_cropper.vue";
import { Button } from "vant";
import { ref, watch } from 'vue';
import { UserSelfForm } from "@b/index/account";
import { pagebuttonStore } from '@b/store';

const pForm = new UserSelfForm();
pForm.show = true
const tempImg = ref("");
const but = pagebuttonStore().button;

pForm.init()
//防止报错而已
pForm.id = 1;
pForm.setData();
pForm.showCroppe = (url: string) => {
    tempImg.value = url
}
watch(tempImg, (url) => {
    pForm.data.headImg = url
})
const update = () => {
    pForm.updateData(true)
}
</script>

<style scoped>
.link {
    min-width: 200px;
}

.link .item {
    border-bottom: 1px solid var(--van-border-color);
    padding: 6px;
    display: flex;
    justify-content: space-between;
}
</style>